<template>
  <div class="log">
    <welcome></welcome>
    <div class="login">
        <div class="login_icon">
            <img src="./logo.png" alt="" class="star">
        </div>
        <div class="textGroup">
            <group>
                 <x-input title="用户名：" v-model="username" placeholder="请输入用户名" required>
                    <img slot="label" style="padding-right:18px;display:block;" src="./user.png" width="18" height="18">
                </x-input>
                <x-input title="密 码：" type="password" placeholder="请输入密码" v-model="password" required>
                    <img slot="label" style="padding-right:18px;display:block;" src="./password.png" width="18" height="18">
                </x-input>
            </group>
        </div>
        <div class="button">
            <x-button type="warn" :show-loading="showLoading" @click.native="login">登录</x-button>
        </div>
        <div class="password">
            <flexbox justify="spaceBetweent">
                <flexbox-item>
                    <div class="memory">
                        <check-icon :value.sync="checked" >记住账号</check-icon>
                    </div>
                </flexbox-item>
                <!-- <flexbox-item style="text-align: right;">
                    <div class="forget">
                        <x-icon type="ios-help-outline" size="23"></x-icon>
                        <a @click.prevent="reset()">忘记密码?</a>
                    </div>
                </flexbox-item> -->
            </flexbox>  
        </div>
    </div>
  </div>
</template>

<script>
import { Group, XInput, XButton, Flexbox, FlexboxItem, CheckIcon } from "vux";
import welcome from "./welcome";
import api from "../../api/index";
export default {
  components: {
    welcome,
    Group,
    XInput,
    XButton,
    Flexbox,
    FlexboxItem,
    CheckIcon
  },
  data() {
    return {
      username: "",
      password: "",
      checked: false,
      showLoading: false
    };
  },
  created() {
    const userid = window.localStorage.getItem("user");
    const user = window.localStorage.getItem("this is username");
    if (userid) {
      this.$router.replace("/home");
    }
    if (user) {
      this.username = user;
    }
  },
  methods: {
    reset() {
      if (this.username == "") {
        this.$vux.toast.text("请输入用户名", "middle");
      } else {
        this.$vux.alert.show({
          content: "系统已为您重置了密码，请注意查看手机短信！"
        });
      }
    },
    login() {
      if (this.username == "") {
        this.$vux.toast.text("请输入用户名", "middle");
      } else if (this.password == "") {
        this.$vux.toast.text("请输入密码", "middle");
      } else {
        const _this = this;

        _this.showLoading = true;

        let data = {
          username: _this.username,
          password: _this.password
        };

        if (this.checked) {
          window.localStorage.setItem("this is username", _this.username);
        } else {
          window.localStorage.removeItem("this is username");
        }

        api
          .login(data)
          .then(res => {
            if (res.code === 1) {
              _this.showLoading = false;

              let date = new Date();
              date = date.getTime();
              let dateStr = JSON.stringify(date);

              window.localStorage.removeItem("user");
              window.localStorage.removeItem("username");
              window.localStorage.removeItem("time");

              window.localStorage.setItem("user", res.data.id);
              window.localStorage.setItem("username", res.data.user_login);
              window.localStorage.setItem("time", dateStr);

              if (_this.$route.query.redirect) {
                _this.$router.replace(
                  decodeURIComponent(_this.$route.query.redirect)
                );
              } else {
                _this.$router.replace("/home");
              }
            } else {
              this.$vux.toast.text(res.msg, "middle");
              _this.showLoading = false;
            }
          })
          .catch(error => {});
      }
    }
  }
};
</script>

<style lang="less">
.log {
  width: 100%;
  height: 100vh;
  // background: url("sign_bg.png") no-repeat;
  background-size: 100% 100%;
  text-align: center;
}
.login {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  // padding: 7.75rem 0 0;
  // background: url("sign_bg.png") no-repeat;
  // background-size: 100% 100%;
  // text-align: center;
  font-size: 0;
  .login_icon {
    display: inline-block;
    width: 100;
    // width: 5.375rem;
    // height: 5.375rem;
    img.star {
      width: 100%;
      height: 100%;
    }
  }
  .textGroup {
    padding: 3.8125rem 0 1.8125rem;
    text-align: center;
    .weui-cells {
      display: inline-block;
      width: 19.125rem;
      margin: 0;
      background: transparent;
      &::before,
      &::after {
        display: none;
      }
      .vux-x-input {
        box-sizing: border-box;
        height: 3.125rem;
        border: 1px solid rgb(217, 213, 213);
        border-radius: 0.3125rem;
      }
      .vux-x-input:first-child {
        margin-bottom: 0.9375rem;
      }
    }
  }
  .button {
    padding: 0 0 0.9375rem;
    text-align: center;
    .weui-btn {
      display: inline-block;
      width: 19.125rem;
      height: 3.125rem;
      font-size: 1.25rem;
    }
  }
  .password {
    display: inline-block;
    width: 19.125rem;
    .memory {
      .weui-icon-circle {
        color: rgb(153, 152, 153);
      }
      .weui-icon-success {
        color: rgb(230, 30, 30);
        ::before {
          color: rgb(230, 30, 30);
        }
      }
      span {
        margin-left: 0.625rem;
        font-size: 1rem;
        color: rgb(51, 51, 51);
      }
    }
    .forget {
      display: inline-flex;
      width: 100%;
      align-items: center;
      justify-content: flex-end;
      .vux-x-icon {
        margin-right: 0.625rem;
        fill: rgb(153, 152, 153);
        // background: url("forgot.png") no-repeat;
        // background-size: 100% 100%;
      }
      a {
        font-size: 1rem;
        color: #666666;
      }
    }
  }
}
</style>